<template>
  <div class="qckc">
    <el-button
      type="info"
      @click="fanhui"
      style="margin-bottom: 20px; width: 100px; height: 40px"
      >返回</el-button
    >
    <header>
      <h3
        style="border-bottom: 1px solid #bbb; line-height: 50px; padding: 0 4%"
      >
        水票基本信息
      </h3>
      <el-table
        :data="infoData.headerData"
        style="margin: 0 0 20px 0; padding: 0 4%"
      >
        <el-table-column prop="water_id" label="水票ID" width="220">
        </el-table-column>
        <el-table-column label="水票图片" width="220">
          <template slot-scope="scope">
            <img
              style="width: 80px; height: 60px"
              :src="configUrl + scope.row.water_img"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column prop="water_name" label="水票名称" width="220">
        </el-table-column>
        <el-table-column label="单价 ">
          <template slot-scope="scope">
            {{ "￥ " + scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="yajin" label="适用商品 "> </el-table-column>
        <el-table-column label="套餐价 ">
          <template slot-scope="scope">
            {{ scope.row.shelf_status === 1 ? "不设置" : "设置" }}
          </template>
        </el-table-column>

        <el-table-column label="状态 ">
          <template slot-scope="scope">
            {{ scope.row.shelf_status === 1 ? "上架" : "下架" }}
          </template>
        </el-table-column>
      </el-table>
    </header>

    <div class="price">
      <h3 class="p1">套餐价格表</h3>
      <el-table
        :data="infoData.tableData"
        style="margin: 0 0 20px 0; padding: 0 4%"
      >
        <el-table-column
          prop="sale_title"
          label="套餐名"
          align="center"
          width="220"
        >
        </el-table-column>
        <el-table-column prop="sale_num" align="center" label="套餐所含水票数 ">
        </el-table-column>
        <el-table-column prop="sale_money" label="总价 " align="center">
        </el-table-column>
        <el-table-column prop="sale_price" label="套餐价 " align="center">
        </el-table-column>
      </el-table>
    </div>

    <div class="content">
      <h3 class="p1">适用商品</h3>
      <div class="head">
        <el-input
          clearable
          v-model="goodsParams.keywords"
          @change="cahangeName"
          placeholder="搜索商品名称"
          prefix-icon="el-icon-search"
          style="margin: 0px 4% 0 0px; width: 230px; height: 40px; float: right"
        >
        </el-input>
      </div>
      <el-table :data="goodsData.list" style="padding: 0 4%">
        <el-table-column type="index" label="序号" align="center" width="120">
        </el-table-column>
        <el-table-column
          prop="goods_sku"
          label="商品编号"
          align="center"
          width="320"
        >
        </el-table-column>
        <el-table-column label="商品主图" width="260">
          <template slot-scope="scope">
            <img
              style="width: 80px; height: 60px"
              :src="configUrl + scope.row.goods_img"
              alt="goods"
            />
          </template>
        </el-table-column>
        <el-table-column prop="goods_name" align="center" label="商品名称 ">
        </el-table-column>
        <el-table-column prop="cate_name" align="center" label="	分类名称 ">
        </el-table-column>
        <el-table-column label="商品单价 " align="center">
          <template slot-scope="scope">
            {{ "￥ " + scope.row.price }}
          </template>
        </el-table-column>
      </el-table>

      <div class="fenye">
        <el-pagination
          background
          layout="pager, next, jumper"
          next-text="下一页"
          :page-count="goodsParams.page_num"
          :pager-count="5"
          @current-change="handleCurrentChange"
          :total="goodsData.all_data_num"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getWaterInfo, getWaterGoods } from "@/api/water"
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      infoData: {
        headerData: [],
        tableData: [],
      },
      goodsParams: {
        keywords: "",
        page_size: 10,
        page_num: 1,
      },
      goodsData: {
        all_data_num: 0,
        list: []
      },
    };
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    fanhui() {
      this.$router.back();
    },
    handleCurrentChange(val) {
      this.goodsParams.page_num = val;
      this.getListForGoods();
    },

    getListForInfo() {
      getWaterInfo({
        token: this.token,
        water_id: this.$route.query.water_id,
      }).then(res => {
        if (res.state) {
          const {
            water_id,
            water_name,
            water_subtitle,
            price,
            water_img,
            is_sale,
            shelf_status,
            water_code,
            water_item,
          } = res.data;
          this.infoData.tableData = water_item;
          this.infoData.headerData = [{
            water_id,
            water_name,
            water_subtitle,
            price,
            water_img,
            is_sale,
            shelf_status,
            water_code,
          }]
        }
      })
    },
    getListForGoods() {
      let obj = {
        token: this.token,
        water_id: this.$route.query.water_id,
        page_size: this.goodsParams.page_size,
        page_num: this.goodsParams.page_num,
      }
      if (this.goodsParams.keywords) {
        obj.keywords = this.goodsParams.keywords
      }
      getWaterGoods(obj).then(res => {
        if (res.state) {
          const {
            list,
            current_page_size,
            current_page_num,
            all_data_num
          } = res.data;
          this.goodsData.list = list;
          this.goodsData.all_data_num = all_data_num;
          this.goodsParams.page_size = current_page_size;
          this.goodsParams.page_num = current_page_num;
        }
      })
    },
    cahangeName(val) {
      this.getListForGoods()
    }

  },
  mounted() {
    this.getListForInfo()
    this.getListForGoods()
  }
};
</script>

<style lang="scss" scoped>
.qckc {
  width: 98%;
  overflow: hidden;
  margin: 1%;

  header {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #fff;
  }
  .price {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 20px;
    .p1 {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #bbb;
      padding: 0 4%;
    }
  }
  .content {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    .p1 {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #bbb;
      padding: 0 4%;
    }
    .head {
      height: 60px;
      padding: 0 4%;
    }
    .fenye {
      width: 100%;
      padding: 80px 0 30px 0;
      .el-pagination,
      .is-background {
        float: right;
        margin-right: 10%;
      }
    }
  }
}
</style>